<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>城市列表</title>
    <script src="__PUBLIC__/jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.2.6.4.css"  media="all">
    <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all" />
    <link rel="stylesheet" href="__CSS__/admin.css"  media="all">
    <style>
        .oprate_btn{margin:4px 10px 4px 0;font-size:12px;}
        .marginLeft0{margin-left: 0}
        tr{height:50px;}
    </style>
</head>
<body>
<div class="layui-fluid main">
<fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px;border:0">
    <div class="layui-form-item" style="float: left;">
        <a href="{:url('admin/poi/addcountry')}" class="layui-btn a_menu">
            添加国家
        </a>

        <a href="{:url('admin/expediacity/citylist')}" class="layui-btn layui-btn-normal">
            查看Expedia城市
        </a>
    </div>
</fieldset>
<table id="test" lay-filter="test" lay-size="sm" class="layui-table" lay-even="true" lay-skin="row"></table>
</div>
</body>
<script src="__PUBLIC__/layui/layui.2.5.6.all.js"></script>
<script src="__PUBLIC__/jquery/jquery.min.js"></script>
<script>
    layui.config({
        base : '__PUBLIC__/'
    }).extend({
        tableTreeDj: './layui_extends/tableTreeDj'
    }).use(['layer','form','jquery','tableTreeDj'],function() {
        let tableTree = layui.tableTreeDj;
        let form = layui.form;

        // 字段配置
        const cols = [[
            {field:'id', title:'ID',fixed:'left'}
            ,{field:'name', title:'名称'}
            ,{field:'eng_name', title:'英文名'}
            ,{field:'', title:'所属',templet:function (d) {
                    return d.type=='COUNTRY'?d.continent_name + '('+d.continent_eng_name+')':'';
                }}
            ,{field:'sort_weight', title:'权重'}
            ,{field:'', title:'北美玩乐小程序',templet:function (d) {
                var checked = d.wxx_recommend==1?'checked':'';
                return '<form class="layui-form" action="">\n' +
                        '                        <div class="layui-form-item">\n' +
                        '                            <div class="layui-input-block marginLeft0">\n' +
                        '                                <input type="checkbox" name="wxx_show" value="1" data-id="'+d.id+'" lay-filter="wxx_show" lay-skin="switch" '+ checked +' lay-text="on|off">\n' +
                        '                            </div>\n' +
                        '                        </div>\n' +
                        '                    </form>';
                }}
            ,{field:'', title:'服务号热门目的地',templet:function (d) {
                    if(d.type=='COUNTRY'){return '';}
                    var checked = d.popular==1?'checked':'';
                    return '<form class="layui-form" action="">\n' +
                        '                        <div class="layui-form-item">\n' +
                        '                            <div class="layui-input-block marginLeft0">\n' +
                        '                                <input type="checkbox" name="search" value="1" data-id="'+d.id+'" lay-filter="search" lay-skin="switch" '+ checked +' lay-text="on|off">\n' +
                        '                            </div>\n' +
                        '                        </div>\n' +
                        '                    </form>';
                }}
            ,{field:'', title:'<div onclick="layer.tips(\'选中国家显示，选中的城市才会在WAP商城可见</br>TOB商城不受限制，选中城市即可显示。\',this,{tips:[2,\'#1E9FFF\']})">' +
                    '<i style="color: #1E9FFF" class="layui-icon layui-icon-tips" ></i>' +
                    '商城/TOB显示' +
                    '</div>',
                templet:function (d) {
                    var checked = d.show==1?'checked':'';
                    return '<form class="layui-form" action="">\n' +
                        '                        <div class="layui-form-item">\n' +
                        '                            <div class="layui-input-block marginLeft0">\n' +
                        '                                <input type="checkbox" name="show" value="1" data-id="'+d.id+'" lay-filter="show" lay-skin="switch" '+ checked +' lay-text="on|off">\n' +
                        '                            </div>\n' +
                        '                        </div>\n' +
                        '                    </form>';
                }}
            ,{field:'', title:'抓取viator商品',templet:function (d) {
                    if(d.type=='COUNTRY'){return '';}
                    var checked = d.getgoods==1?'checked':'';
                    return '<form class="layui-form" action="">\n' +
                        '                        <div class="layui-form-item">\n' +
                        '                            <div class="layui-input-block marginLeft0">\n' +
                        '                                <input type="checkbox" name="getgoods" value="1" data-id="'+d.id+'" lay-filter="getgoods" lay-skin="switch" '+ checked +' lay-text="on|off">\n' +
                        '                            </div>\n' +
                        '                        </div>\n' +
                        '                    </form>';
                }}
            ,{field: '', title: '操作', width: 200, fixed:'right',templet:function (d) {
                    var addCity = d.type=='COUNTRY' ?
                    '<a href="/admin/city/addcity/groupid/'+ d.id +'" class="layui-btn layui-btn-xs layui-btn-warm oprate_btn a_menu">添加</a>'
                    :'';
                    var editCityUrl = d.type=='COUNTRY' ?
                        '/admin/city/addcountry/id/'+d.id :
                        '/admin/city/addcity/groupid/'+d.groupid+'/id/'+d.id;
                    var use_title = d.deleted==1 ? '启用' : '弃用';
                    var use_class_name = d.deleted==1 ? 'use' : 'delete';
                    var use_class_btn = d.deleted==1 ? 'layui-btn-warm' : 'layui-btn-danger';
                    return addCity + '<a href="'+ editCityUrl +'" class="layui-btn layui-btn-xs oprate_btn a_menu">修改</a>\n' +
                        '<a class="layui-btn layui-btn-xs '+use_class_btn+' oprate_btn '+use_class_name+'" data-id="'+d.id+'">'+use_title+'</a>';
                }}
        ]];

        // 表格配置
        const objTable = {
            elem: '#test'
            ,url: '{:url("/admin/expediacity/getCountryData")}'
            ,cols: cols
            ,id: 'list'
            ,cellMinWidth:120
            ,done:function(res, curr, count) {

            }
            ,parseData:function(res) {
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": res.data //解析数据列表
                };
            }
            ,loading:true
        }

        const objTree = {
            keyId: "id" // 当前ID
            , keyPid: "pid" // 上级ID
            , title: "name" // 标题名称字段,此字段td用于绑定单击折叠展开功能
            , indent: '&nbsp;&nbsp;&nbsp;&nbsp;╠═ ' // 子级td的缩进.可以是其他字符
            // 图标
            , icon: {
                open: 'layui-icon layui-icon-triangle-d', // 展开时候图标
                close: 'layui-icon layui-icon-triangle-r', // 折叠时候图标
            }
            , showCache: true //是否开启展开折叠缓存,默认不开启.
            , sort: 'asc'
        }

        // tableTree 渲染表格
        tableTree.render(objTable, objTree);
        //北美玩乐小程序
        form.on('switch(wxx_show)', function(data){
            var id= $(this).attr('data-id')
            layer.confirm('确认修改吗？',function () {
                var show = data.elem.checked ? 1 : 0;
                $.post("{:url('admin/City/wxx_recommend')}",{id,show},function (res) {
                    layer.msg(res.msg);
                    if(res.code == 1) {
                        setTimeout(function(){
                            location.reload();
                        },1500)
                    }
                },'json')
            })

        });
        //服务号热门目的地
        form.on('switch(search)', function(data){
            var id= $(this).attr('data-id')
            layer.confirm('确认修改吗？',function () {
                var popular = data.elem.checked ? 1 : 0;
                $.post("{:url('admin/City/recommend')}",{id,popular},function (res) {
                    layer.msg(res.msg);
                    if(res.code == 1) {
                        setTimeout(function(){
                            location.reload();
                        },1500)
                    }
                },'json')
            })

        });
        //商城/TOB显示
        form.on('switch(show)', function(data){
            var id= $(this).attr('data-id')
            layer.confirm('确认修改吗？',function () {
                var show = data.elem.checked ? 1 : 0;
                $.post("{:url('admin/City/setshow')}",{id,show},function (res) {
                    layer.msg(res.msg);
                    if(res.code == 1) {
                        setTimeout(function(){
                            location.reload();
                        },1500)
                    }
                },'json')
            })


        });
        //抓取viator商品
        form.on('switch(getgoods)', function(data){
            var id= $(this).attr('data-id')
            layer.confirm('确认修改吗？',function () {
                var getgoods = data.elem.checked ? 1 : 0;
                $.post("{:url('admin/City/getgoods')}",{id,getgoods},function (res) {
                    layer.msg(res.msg);
                    if(res.code == 1) {
                        setTimeout(function(){
                            location.reload();
                        },1500)
                    }
                },'json')
            })


        });

        $(document).on('click','.delete',function(){
            var id = $(this).attr('data-id');
            layer.confirm('确定要弃用吗?<br>弃用后会主动弃用城市和城市下的所有POI<br>请谨慎操作', function(index) {
                $.ajax({
                    url:"{:url('admin/city/delcity')}",
                    type:"post",
                    data:{id:id,deleted:1},
                    success:function(res) {
                        layer.msg(res.msg);
                        if(res.code == 1) {
                            setTimeout(function(){
                                location.href = res.url;
                            },1500)
                        }
                    }
                })
            })
        })
        $(document).on('click','.use',function(){
            var id = $(this).attr('data-id');
            layer.confirm('确定要启用吗?<br>启用后会启用城市和城市下的所有POI', function(index) {
                $.ajax({
                    url:"{:url('admin/city/delcity')}",
                    type:"post",
                    data:{id:id,deleted:0},
                    success:function(res) {
                        layer.msg(res.msg);
                        if(res.code == 1) {
                            setTimeout(function(){
                                location.href = res.url;
                            },1500)
                        }
                    }
                })
            })
        })

        $(document).on('click','.a_menu',function(){
            var url = $(this).attr('href');
            layer.open({
                type:2,
                content:url,
                area: ['65%', '90%'],
                end:function(){
                    location.reload();
                }
            });
            return false;
        });
    })
</script>
</html>